<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>VUE3</title>
  </head>
  <body>
    <div id="app"></div>

    <template id="tpl">
      <div>
        <!-- 绑定单个事件 -->
        <button @click="onClick">按钮</button>
      </div>
      <!-- 绑定多个事件 -->
      <div
        v-on="{click:onClick,mousemove:onMouseMove}"
        style="
          background: red;
          width: 20vw;
          height: 20vh;
          color: white;
          cursor: default;
        "
        v-text="`${mouseX}, ${mouseY}`"
      ></div>
    </template>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
      Vue.createApp({
        template: "#tpl",
        data() {
          return {
            mouseX: "N/A",
            mouseY: "N/A",
          };
        },

        methods: {
          onClick() {
            console.log("触发点击事件", Math.random());
          },
          onMouseMove(e) {
            this.mouseX = e.clientX;
            this.mouseY = e.clientY;
            console.log("触发鼠标移动事件", e);
          },
        },
      }).mount("#app");
    </script>
  </body>
</html>
